<template>
  <div class="flHydrantInfo">
    <button class="leftTreetitleButton" @click="treeShowOrClose = true" v-if="!treeShowOrClose">
      <i class="el-icon-caret-right"></i>
    </button>
    <div class="leftTree" v-if="treeShowOrClose">
      <!-- 树形图 -->
      <hydrantLeftTree class="waterMeterLeftTree" @clickClose="clickClose" @areaIf="areaIf" />
    </div>
    <div :class="[
        { rightcontant: treeShowOrClose },
        { rightcontant2: !treeShowOrClose },
      ]">
      <deviceTable :areaCode="areaCode" />
    </div>
  </div>
</template>
<script>
import hydrantLeftTree from '@/views/components/FLPage/hydrantLeftTree.vue';
import deviceTable from "./components/deviceTable"; // 区域树
export default {
  components: {
    hydrantLeftTree,
    deviceTable
  },
  data () {
    return {
      areaCode: "",
      treeShowOrClose: false,
    }
  },
  methods: {
    clickClose (res) {
      if (res === '点击隐藏') {
        this.treeShowOrClose = false
      }
    },
    areaIf (value) {
      this.areaCode = value
    }
  }
}

</script>

<style lang="scss" scoped>
.flHydrantInfo {
  display: flex;
  .leftTreetitleButton {
    margin-top: 10px;
    border: 0;
    height: 32px;
  }
  .leftTree {
    width: 270px;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
  }
  .rightcontant {
    width: calc(100% - 270px);
    padding: 20px 2px 20px 2px;
  }
  .rightcontant2 {
    width: 100%;
    padding: 20px 2px 20px 2px;
  }
}
</style>